/* card */
.card {
    -webkit-perspective: 1000;
}

.card .flipped {
    -webkit-transform: rotatey(-180deg);
}

.card .faces {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 1s;
}

.card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
}

.card .face.front {
    z-index: 1;
    -webkit-transform: rotatey(0deg);
}

.card .face.back {
    z-index: 2;
    -webkit-transform: rotatey(-180deg);
}
